<template>
  <page-header-wrapper>
    <template #content>
      <p style='border-left: 2px solid #ef0707;padding-left: 10px;'>
        题目分配规则: 你需要的判题用户数量 = 新人数量 / 评分员数量 <a target='_blank'
                                                                      href='https://gitee.com/tiantian17/jx-welcome/blob/master/jx-welcome-backend/jx-job/src/main/java/com/tiantian/job/jobdemo/demo.java'>
        详情
      </a>
      </p>
      <p style='border-left: 2px solid #cccbcb;padding-left: 10px;'>最终评分将以最后一次评分为准, 之前的评分均无效</p>
      <p style='border-left: 2px solid #ef0707;padding-left: 10px;'>
        当前分数线为: <span style='color: red'>{{ scoreLine }}</span> (当用户总分超过分数线时则进入二轮面试)
        <a-button size='small' style='margin-left: 15px;'
                  :loading='exportLoading'
                  @click='exportExcel("scoreThrough")'>导出评分通过名单
        </a-button>
      </p>
  
      <p style='border-left: 2px solid #ef0707;padding-left: 10px;'>
        <a-button size='small' style='margin-left: 15px;'
                  :loading='exportLoading2'
                  @click='exportJudgeResultExcel()'>导出所有判题结果
        </a-button>
      </p>
    
    </template>
    <a-card :bordered='false'>
      
      <div class='table-page-search-wrapper'>
        <a-form layout='inline'>
          <a-row :gutter='48'>
            
            <a-col
              :md='!advanced && 5 || 8'
              :sm='16'>
              <a-form-item
                label='只搜索我需要判的题'>
                <a-switch
                  :default-checked='false'
                  @change='onChange' />
              </a-form-item>
            </a-col>
            
            <a-col :md='!advanced && 6 || 8' :sm='16'>
              <a-form-item label='姓名'>
                <a-input
                  v-model='queryParam.nickName'
                  placeholder='请输入姓名或关键字' />
              </a-form-item>
            </a-col>
            
            <a-col
              :md='!advanced && 6 || 8'
              :sm='16'>
              <a-form-item label='判题状态'>
                <a-select
                  v-model='queryParam.judgeStatus'
                  placeholder='请选择'
                  default-value='null'>
                  <a-select-option :value="'0'">进行中</a-select-option>
                  <a-select-option :value="'1'">已完成</a-select-option>
                  <a-select-option :value="''">全部状态</a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
            
            <!--展开区域 => 高级搜索功能-->
            <template v-if='advanced'>
              <a-col :md='8'
                     :sm='24'>
                <a-form-item label='总分(大于)'>
                  <a-input-number
                    placeholder='请输入总分(大于)'
                    :min='0'
                    :max='100'
                    v-model='queryParam.totalScore'
                    style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col
                :md='8'
                :sm='24'>
                <a-form-item label='学号'>
                  <a-input
                    v-model='queryParam.studentId'
                    placeholder='请输入学号(支持模糊查询)'
                    style='width: 100%' />
                </a-form-item>
              </a-col>
              <a-col :md='8' :sm='24'>
                <a-form-item label='判题人'>
                  <a-input
                    v-model='queryParam.judger'
                    placeholder='请输入学号(支持模糊查询)'
                    style='width: 100%' />
                </a-form-item>
              </a-col>
            </template>
            <a-col
              :md='!advanced && 7 || 24'
              :sm='24'>
              <span class='table-page-search-submitButtons'
                    :style="advanced && { float: 'right', overflow: 'hidden' } || {} ">
                <a-button
                  type='primary'
                  @click='searchJudgeInfo'>
                  查询
                </a-button>
                <a-button
                  class='search-reset-btn'
                  @click='() => this.queryParam = {}'>重置</a-button>
                <a
                  @click='toggleAdvanced'
                  class='search-reset-btn'>
                  {{ advanced ? '收起' : '高级搜索' }}
                  <a-icon :type="advanced ? 'up' : 'down'" />
                </a>
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      
      <a-divider orientation='center' class='tb-d-list'>
        评分列表
      </a-divider>
      
      <a-table
        ref='table'
        bordered
        rowKey='studentId'
        :loading='loading'
        :columns='columns'
        :data-source='loadData'
        :pagination='pagination'
        @change='handleTableChange'
        showPagination='auto'
      >
        
        <!--学号-->
        <span slot='studentId' slot-scope='studentId'>
          {{ studentId }}
        </span>
        
        <!--姓名-->
        <span
          slot='nickName'
          slot-scope='nickName'>
          {{ nickName }}
        </span>
        
        <!--班级-->
        <span
          slot='status'
          slot-scope='clasz'>
          {{ clasz }}
        </span>
        
        <!--提交数目-->
        <span
          slot='subCount'
          slot-scope='subCount'>
          {{ subCount }}
        </span>
  
        <!--提交数目-->
        <span
          slot='judger'
          slot-scope='judger'>
          {{ judger || '未进行分配' }}
        </span>
        
        <!--判题状态-->
        <span
          slot='judgeStatus'
          slot-scope='judgeStatus'>
          <a-badge
            :status='judgeStatus | statusTypeFilter'
            :text='judgeStatus | statusFilter' />
        </span>
        
        <!--提交时间-->
        <span
          slot-scope='updateTime'
          slot='updateTime'>
          {{ updateTime }}
        </span>
        
        
        <!--操作-->
        <span
          slot='action'
          slot-scope='text, record'>
          <!-- 当judger为当前的用户的时候才展示判题按钮 -->
            <a
              v-if='curJudger === record.judger'
              @click='goToJudge(record)'>
              进行判题
            </a>
          <a-divider
            v-if='curJudger === record.judger'
            type='vertical' />
            <a @click='goToJudgeDetail(record)'>
              查看判题详情
            </a>
        </span>
      
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getJudgeList } from '@/api/judge'
import { getScoreLine } from '@/api/systemConfig'
import { exportExcel, exportJudgeResultExcel } from '@/api/common'
import FileSaver from 'file-saver'

const columns = [
  {
    title: '学号',
    width: 200,
    dataIndex: 'studentId',
    scopedSlots: { customRender: 'studentId' }
  },
  {
    title: '姓名',
    dataIndex: 'nickName',
    scopedSlots: { customRender: 'nickName' }
  },
  {
    title: '班级',
    dataIndex: 'clasz',
    scopedSlots: { customRender: 'clasz' }
  },
  {
    title: '已提交题目数量',
    dataIndex: 'subCount',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.subCount - b.subCount,
    scopedSlots: { customRender: 'subCount' }
  },
  {
    title: '判题人',
    dataIndex: 'judger',
    scopedSlots: { customRender: 'judger' }
  },
  {
    title: '判题状态',
    dataIndex: 'judgeStatus',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.judgeStatus - b.judgeStatus,
    scopedSlots: { customRender: 'judgeStatus' }
  },
  {
    title: '总分',
    dataIndex: 'totalScore',
    defaultSortOrder: 'ascend',
    sorter: (a, b) => a.totalScore - b.totalScore,
    scopedSlots: { customRender: 'totalScore' },
    customRender: (totalScore) => {
      if (totalScore === null || totalScore === undefined) {
        return '判题未开始'
      }
      return totalScore
    }
  },
  {
    title: '提交题目时间',
    dataIndex: 'updateTime',
    sorter: (a, b) => a.updateTime > b.updateTime ? 1 : -1,
    customRender: (updateTime) => {
      if (updateTime === null || updateTime === undefined || updateTime === '') {
        return '用户未任何解题提交'
      }
      return updateTime
    }
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center' //头部单元格和列内容水平居中
  }
]

const statusMap = {
  0: {
    status: 'processing',
    text: '进行中'
  },
  1: {
    status: 'success',
    text: '已完成'
  }
}

export default {
  name: 'QuestionJudge',
  data() {
    this.columns = columns
    return {
      loading: false,
      exportLoading: false,
      exportLoading2: false,
      advanced: false,
      curJudger: this.$store.state.user.name,
      queryParam: {},
      loadData: [],
      scoreLine: 0,
      //分页参数
      pagination: {
        size: 'large',
        current: 1,
        pageSize: 10,
        total: 0,
        pageSizeOptions: ['10', '15', '20'],//可选的页面显示条数
        showTotal: (total, range) => {
          return ' 共' + total + '条'
        }, //展示每页第几条至第几条和总数
        hideOnSinglePage: false, // 只有一页时是否隐藏分页器
        showQuickJumper: true, //是否可以快速跳转至某页
        showSizeChanger: true //是否可以改变pageSize
      }
    }
  },
  filters: {
    statusFilter(type) {
      return statusMap[type].text
    },
    statusTypeFilter(type) {
      return statusMap[type].status
    }
  },
  created() {
    this.getDataList()
    this.getScoreLine()
  },
  methods: {
    // 获取分数线时间
    getScoreLine() {
      getScoreLine().then(response => {
        this.scoreLine = response.data.scoreLine
      })
    },
    // 导出excel数据
    exportExcel(type) {
      this.exportLoading = true
      exportExcel(type)
        .then(res => {
          let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
          FileSaver.saveAs(blob, Date.now() + '.xlsx')
          this.$message.success('导出成功')
          this.exportLoading = false
        })
    },
    // 导出excel数据
    exportJudgeResultExcel() {
      this.exportLoading2 = true
      exportJudgeResultExcel()
        .then(res => {
          let blob = new Blob([res.data], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8' })
          FileSaver.saveAs(blob, Date.now() + '.xlsx')
          this.$message.success('导出成功')
          this.exportLoading2 = false
        })
    },
    getDataList() {
      this.loading = true
      getJudgeList(this.queryParam).then(response => {
        this.loadData = response.rows
        this.pagination.total = response.total
        this.loading = false
      })
    },
    //表格改变时触发
    handleTableChange(pagination, filters, sorter) {
      this.pagination = pagination
      // 排序
      this.queryParam.field = sorter.field
      this.queryParam.order = sorter.order.replaceAll("end", "")
      // 分页
      this.queryParam.pageNum = pagination.current
      this.queryParam.pageSize = pagination.pageSize
      this.getDataList()
    },
    // 展开高级搜索功能
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    onChange(checked) {
      this.queryParam.needMe = checked
    },
    // 搜索
    searchJudgeInfo() {
      this.getDataList()
    },
    // 进行判题
    goToJudge(judgeInfo) {
      // 页面跳转至判题详情页面
      let routeData = this.$router.resolve({
        path: '/judge/detail',
        query: {
          userId: judgeInfo.userId,
          mode: 'judge'
        }
      })
      window.open(routeData.href, '_blank')
    },
    // 查看判题目详情
    goToJudgeDetail(judgeInfo) {
      // mode=view
      let routeData = this.$router.resolve({
        path: '/judge/detail',
        query: {
          userId: judgeInfo.userId,
          mode: 'view'
        }
      })
      window.open(routeData.href, '_blank')
    }
  }
}
</script>

<style scoped lang='less'>
.search-reset-btn {
  margin-left: 8px
}

.tb-d-list {
  margin-top: 20px;
  margin-bottom: 50px;
}
</style>